<template>

  <view :class="$style.container">
    <view :class="$style.detail" class="flex flex-col">
      <!-- 收藏 -->
      <!-- <alert-collection style="margin-top: 20rpx;"></alert-collection> -->
      <!-- 警情状态 指数信息 -->
      <alert-state v-if="stateInfo" style="margin-top: 20rpx;" :stateInfo='stateInfo'></alert-state>
      <!-- 报警信息 -->
      <call-info v-if="callInfo?.bjcs" style="margin-top: 20rpx;" :firstAlarmPerson='firstAlarmPerson'
        :callInfo='callInfo'></call-info>
      <!-- 对象信息 -->
      <victim-info v-if="affectedInfo" style="margin-top: 20rpx;" :affectedInfo='affectedInfo'></victim-info>
      <!-- 出动力量信息 -->
      <dispatch-power v-if="powerInfo" style="margin-top: 20rpx;" :powerInfo='powerInfo'></dispatch-power>
      <!-- 现场图像信息 -->
      <situation-image v-if="mediaInfo?.length" style="margin-top: 20rpx;" :mediaInfo='mediaInfo'></situation-image>
      <!-- 组织指挥信息 -->
      <organize-command v-if="commandInfo" style="margin-top: 20rpx;" :commandInfo='commandInfo'></organize-command>
      <!-- 联动力量信息 -->
      <linkage-force v-if="linkageForceInfo?.length" style="margin-top: 20rpx;" :linkageForceInfo='linkageForceInfo'>
      </linkage-force>

    </view>

  </view>
</template>

<script setup lang='ts'>
import AlertState from "./alert-state/index.vue";
import CallInfo from "./call-info/index.vue";
import VictimInfo from "./victim-info/index.vue";
import DispatchPower from "./dispatch-power/index.vue";
import SituationImage from './situation-image/index.vue'
import OrganizeCommand from './organize-command/index.vue'
import LinkageForce from './linkage-force/index.vue'

import { onMounted, ref } from "vue";
import { queryAlertDetail } from "@/api";
import { useAuthStore } from '@/store'

const authStore = useAuthStore()

/**页面加载时获取跳转传过来的参数 */
// onLoad((option) => {
//   console.log("跳转至警情详情页面时携带的警情id", option.jqId);
//   jqId.value = option.jqId || "";
// });

/** 页面挂载时 加载数据 */
onMounted(() => {
  getList()
});

interface Props {
  jqId: string;
}
const props = withDefaults(defineProps<Props>(), {
  jqId: '',
});

const jcjAjxxInfo = ref<any>({});
const alertInfo = ref<any>({});
const stateInfo = ref<any>({});
const commandInfo = ref<any>({});
const powerInfo = ref<any>({});
const linkageForceInfo = ref<any>([]);
const callInfo = ref<any>({});
const affectedInfo = ref<any>({});
const mediaInfo = ref<any>([]);
const firstAlarmPerson = ref<any>([])

function getList() {
  let params = {
    zhid: authStore.getOpenId || '',
    ajxxId: props.jqId,
    zhzt: "07"
  }

  queryAlertDetail(params).then((res: any) => {
    console.log('查询警情详情', res);
    jcjAjxxInfo.value = alertInfo.value?.jcjAjxxInfo;
    alertInfo.value = res.data;
    stateInfo.value = alertInfo.value?.jqGjcInfo
    commandInfo.value = alertInfo.value?.zzzhInfo
    powerInfo.value = alertInfo.value?.cdllInfo
    linkageForceInfo.value = alertInfo.value?.lqLdllInfos.map((it: any) => {
      return {
        ...it,
        showPage: false
      }
    })

    mediaInfo.value = alertInfo.value?.dmtInfos
    callInfo.value = alertInfo.value?.bjxxInfo
    callInfo.value.jcjBjjlInfos.map((item: any) => {
      if (item.sfdygbj == true) {
        firstAlarmPerson.value.push(item)

        console.log('firstAlarmPerson', firstAlarmPerson)
      }
    })

    affectedInfo.value = alertInfo.value?.jyDwxxInfo
  });
};


</script>

<style lang='less' module>
.container {
  position: relative;
  width: 100vw;
  overflow-x: hidden;

  .detail {
    width: 100%;
    // min-height: 2380rpx;
    background: #f5f6f7;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    padding: 20rpx 30rpx 140rpx;
  }

  .alert_state {
    margin-top: 20rpx;
  }

  .button {
    width: 40%;
    border-radius: 40rpx;
    color: #5678f4;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    background: rgba(86, 120, 244, 0.1);

    &::after {
      border: 0;
    }
  }
}
</style>
